<#import "/spring.ftl" as spring/>

<#include "/tags/userNotification.ftl">
<#include "/tags/famousQuote.ftl">
<#include "/tags/userCompleteness.ftl">
<#include "/tags/userIntroTag.ftl">
<#include "/tags/friendList.ftl">
<#include "/tags/friendHintTag.ftl">
﻿<#include "/tags/goalProcessTag.ftl">
<#include "/tags/goalEntryTag.ftl">
<#include "/tags/goalCloudTag.ftl">
<#include "/tags/updatedSinceTag.ftl">
<#include "/tags/DDMMYYYY.ftl">
<#include "/tags/likeTag.ftl">
<#include "/tags/entryAvatar.ftl">
<#include "/tags/allFriendTag.ftl">
<#include "/tags/topGoalsTag.ftl">

<head>	    
    <link type="text/css" rel="stylesheet" href="${rc.contextPath}/scripts/cleditor/jquery.cleditor.css">	
	<script type="text/javascript" src="${rc.contextPath}/scripts/cleditor/jquery.cleditor.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/editEntry.js"></script>      
    
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/style_dev.css">
	<title>${data.userInSession}'s dashboard</title>
	<script>
		jQuery(document).ready(function(){		
			loadData();
				
			var $cle = jQuery("textarea[name=body]").cleditor({
				width: 643,
				height: 200,
				controls: "bold italic underline"
			});			
			$cle.each(function(){
				this.change(function(){
					var $area = this.$area;
					var val = $area.val();	
					val = jQuery.trim(val);								
					if($area.hasClass('limitedInput')){
						var maxlength = $area.attr("rel");
        				maxlength = parseInt(maxlength);
        				if(val.length>maxlength){
        					$area.val(val.substring(0,maxlength));
        				}
					}else{
						$area.val(val);
					}
					this.updateFrame();
				});
			});
			
			jQuery("textarea.limitedInput").keydown(function(e){
        		if(e.keycode == 8 || e.which == 8 ||
        		(e.keycode >= 35 && e.keycode <= 40) ||
        		(e.which >= 35 && e.which <= 40) ||
        		(e.keycode == 17 || e.keycode == 18) ||
        		(e.which == 18 || e.which == 17) || 
        		(e.which == 46 || e.which == 46)) return true;
        		var maxlength = jQuery(this).attr("rel");
        		return jQuery(this).val().length <= parseInt(maxlength);
        	}).change(function(){
        		var maxlength = jQuery(this).attr("rel");
        		maxlength = parseInt(maxlength);
        		var val = jQuery(this).val();
        		if(val.length>maxlength){
        			jQuery(this).val(val.substring(0,maxlength));
        		}
        	});
        	
        	jQuery("input[rel=numeric]").keydown(function(e){
				var flag = e.keyCode >= 48 && e.keyCode <= 57;
				flag |= e.keyCode == 32 || e.keyCode == 8;
				flag |= e.which >= 48 && e.which <= 57;
				flag |= e.which == 32 || e.which == 8; 
				
				if(!flag){
					return false;
				}
			});
			
			var uploadFormOptions = {
				url : '/fileupload/file',
				type : 'post',
				dataType : 'xml',		
				beforeSubmit : validateImageUpload,
				success : updateImagePath
			};
			
			jQuery('#uploadForm').ajaxForm(uploadFormOptions);
        	     	        	       	        	
		});
		
		function loadData(){
			var $form = jQuery("div#submitForm form");
			var goalId = $form.children("#goalId").val();
			if(goalId == "") {
				return;
			}
			
			var helpful = $form.children("#helpful").val();
			if(helpful == "true"){
				jQuery("input[name=d_helpful]").filter('[value=worth]').attr('checked', true);				
			}else{
				jQuery("input[name=d_helpful]").filter('[value=unworth]').attr('checked', true);
			}
			
			var share = $form.children("#share").val();
			if(share == "true"){
				jQuery("input[name=d_share]").filter('[value=yes]').attr('checked', true);
			}else{
				jQuery("input[name=d_share]").filter('[value=no]').attr('checked', true);
			}
			
			var tookType = $form.children("#tookType").val();
			jQuery("select#d_tookType").val(tookType);
			
			var tookAmount = $form.children("#tookAmount").val();
			jQuery("input#d_tookAmount").val(tookAmount);
			
			var tip = $form.children("#tip").val();
			jQuery("textarea#d_tip").val(tip);
			
			var solution = $form.children("#solution").val();
			jQuery("textarea#d_solution").val(solution);
			
			var resources = $form.children("#resources").val();
			jQuery("textarea#d_resources").val(resources);
			
			var experience = $form.children("#experience").val();
			jQuery("textarea#d_experience").val(experience);
			
			var imgURL = $form.children("#imgURL").val();
			if(imgURL != ""){
				jQuery("img#preview_").attr("src", imgURL).show();
				jQuery("progressBar").attr("style", "display:none;");
			}
			
			var title = $form.children("#title").val();
			jQuery("input#d_title").val(title);
			//$form.children("#feelingType").val("HAPPY");
		}
		
		function updateImagePath(responseXML) {
			var image = jQuery('image', responseXML).text();
			jQuery("input[name='imgURL']").val(image);
			jQuery("img#preview_").attr("src", image).fadeIn();
			jQuery("progressBar").attr("style", "display:none;");
		}
		
		function validateImageUpload(formData, jqForm, options) {
			var form = jqForm[0];
			if (form.image.value) {
				return true;
			}
			
			iAlert("Bạn chưa chọn hình ảnh để upload");
			return false;
		}
		
		function validateAndSubmit(){
			var flag = true;
			
			var helpful = jQuery("input[name=d_helpful]").attr("checked");
						
			var share = jQuery("input[name=d_share]").attr("checked");			
			
			var $title = jQuery("input#d_title");			
			flag &= checkTextareaEmpty($title);
			
			var tookType = jQuery("select#d_tookType").val();
			var tookAmount = jQuery("input#d_tookAmount").val();			
			if(tookAmount=="" || isNaN(tookAmount)){				
				jQuery("input#d_tookAmount").focus();
				return;
			}
			
			var $tip = jQuery("textarea#d_tip");
			flag &= checkTextearaMaxLength($tip);
			flag &= checkTextareaEmpty($tip);
			var $solution = jQuery("textarea#d_solution");
			flag &= checkTextearaMaxLength($solution);
			flag &= checkTextareaEmpty($solution);
			var $resources = jQuery("textarea#d_resources");
			flag &= checkTextearaMaxLength($resources);
			flag &= checkTextareaEmpty($resources);
			var $experience = jQuery("textarea#d_experience");
			flag &= checkTextearaMaxLength($experience);
			flag &= checkTextareaEmpty($experience);
			
			var title = $title.val();
			var tip = $tip.val();
			var solution = $solution.val();			
			var experience = $experience.val();
			var resources = $resources.val();
			var imgURL = jQuery("img#preview_").attr("src");
			
			if(!flag){
				//iAlert("fail");
			}else{
				submitForm(helpful, share, title, tookType, tookAmount, tip, solution, resources, experience, imgURL);		
			}
		}
		
		function submitForm(helpful, share, title, tookType, tookAmount, tip, solution, resources, experience, imgURL){
			var $form = jQuery("div#submitForm form");
			var goalId = $form.children("#goalId").val();
			if(goalId == "") {
				window.location = '/dashboard.html';
				return;
			}
			
			$form.children("#helpful").val(helpful);
			$form.children("#share").val(share);
			$form.children("#tookType").val(tookType);
			$form.children("#tookAmount").val(tookAmount);
			$form.children("#tip").val(tip);
			$form.children("#solution").val(solution);
			$form.children("#resources").val(resources);
			$form.children("#experience").val(experience);
			$form.children("#imgURL").val(imgURL);
			$form.children("#title").val(title);
			$form.children("#feelingType").val("HAPPY");
			
			$form.submit();
		}
		
		function checkTextearaMaxLength($textarea){
			var val = $textarea.val();
			var maxlength = parseInt($textarea.attr('rel'));
			if(val.length > maxlength){
				$textarea.css("border","medium solid red");
				return false;
			}else{
				$textarea.css("border","medium none");
				return true;
			}
		}
		
		function checkTextareaEmpty($textarea){
			var val = $textarea.val();
			if(val.length == 0){
				$textarea.css("border","medium solid red");
				return false;
			}else{
				$textarea.css("border","medium none");
				return true;
			}
		}		
	</script>	
</head>

 <@userNotification />  
  <div class="w3"></div>
  <div id="goodjob">
   	<div class="left"></div>
    <div class="center">
    	<p class="top">Chúc mừng bạn đã hoàn thành mục tiêu : <#if data.goalTitle??>${data.goalTitle}</#if></p>
        <div class="middle bogoc">
        	<span class="number">1</span>
		<style>
			.inputRadioDidit input{margin-left:10px;margin-right:3px;vertical-align:-1px;cursor:pointer}
		</style>
            <p class="text inputRadioDidit" >Mục tiêu này có giúp ích nhiều cho bạn không? <input type="radio" checked="checked" value="worth" name="d_helpful" style="margin-left:10px"/><label>Có</label> <input type="radio" name="d_helpful" value="unworth"/><label>Không</label></p>
        </div>
        <div class="w12"></div>

        <div class="middle bogoc">
        	<span class="number">2</span>
            <p class="text inputRadioDidit">Bạn có sẵn sàng chia sẻ quá trình thực hiện mục tiêu này không? <input  type="radio" checked="checked" value="yes" name="d_share"/><label>Có</label> <input type="radio" name="d_share" value="no"/><label>Không</label></p> 
        </div>
        <div class="bottom">
        	<a>HÃY VIẾT BÀI CHIA SẺ THÀNH CÔNG CỦA BẠN!</a>
        </div>
    </div>
    <div class="right"></div>
  </div>
  <div id="infomation">
    <div id="left">
      <div class="edittitle" style="padding-bottom:4px">
      		<div class="icon"></div><span style="color:#666;font-size:15px">Chia sẻ quá trình thực hiện mục tiêu này</span>
      </div>
      <div class="clearthis"></div>
        <div class="hidi_box">
           <div class="hidi_top"><div></div></div>
              <div class="hidiContent">
                 <div class="hidiTime">
                 	<span class="hidiIcon time"></span>
                    <label>Mục tiêu này được thực hiện trong thời gian bao lâu?</label>
                    <input type="text" class="hidiInput" id="d_tookAmount" rel="numeric" maxlength="2"/>
                    <select style="height:25px;font-size:14px;" id="d_tookType">
                    	<option value="DAY">Ngày</option>
                    	<option value="WEEK">Tuần</option>
                    	<option value="MONTH">Tháng</option>
                    	<option value="YEAR">Năm</option>
                    </select>
                 </div>
                 
                 <div class="hidiQuote">
                 	<span class="hidiIcon quote"></span>
                    <label>Dùng một câu để tóm lược quá trình thực hiện mục tiêu của bạn:</label>
                    <div class="clearthis"></div>
                    <textarea cols="5" rows="4" class="limitedInput" rel="255" id="d_experience"></textarea>
                 </div>                
              </div>              
           <div class="hidi_bottom"><div></div></div>
        </div>
        <div class="hidiEditor">
            <span class="hidiIcon editor"></span>
            <label>Tiêu đề</label>
            <div class="hidiEdtiorTool">
            	<input maxlength="255" id="d_title" size="" style="border:1px solid #cecece;color:#333;font-size:16px;height:34px;width:646px;"></textarea>
            </div>
   	  </div>
       <div class="hidiEditor">
            <span class="hidiIcon editor"></span>
            <label>Bạn đã thực hiện mục tiêu này như thế nào?</label>
            <div class="hidiEdtiorTool">
            	<textarea class="infobox limitedInput" rel="20000" name="body" id="d_solution"></textarea>
            </div>
   	  </div>
      <div class="hidiEditor">
            <span class="hidiIcon editor"></span>
            <label>Bài học mà bạn có thể chia sẻ cho những người đang thực hiện mục tiêu này?</label>
            <div class="hidiEdtiorTool"><textarea class="infobox limitedInput" rel="20000" name="body" id="d_tip"></textarea></div>
   	  </div>
      <div class="hidiEditor">
            <span class="hidiIcon editor"></span>
            <label>Nguồn tài nguyên hỗ trợ thực hiện mục tiêu này?</label>
            <div class="hidiEdtiorTool"><textarea class="infobox limitedInput" rel="20000" name="body" id="d_resources"></textarea></div>
   	  </div>
   	  <div class="w6"></div>
      <!--form id="uploadForm" enctype="multipart/form-data">
		<div class="title">
			<div class="left">Tải hình ảnh lên</div>
		</div>
		<div class="uploadimg">
			<input name="image" type="file" style="float: left;"/>
			<input name="entry" value="entry" type="hidden"/>
			<div class="w7"></div>
			<input class="uploadbutton" type="submit" value="" />
		</div>
	  </form-->
	  <div class="uploaderBox">
    	<p>Bạn có thể tải tập tin <b>JPG</b>, <b>GIF</b> hoặc <b>PNG</b>, tối đa là <b>4MB</b>, kích cỡ tối thiểu <b>180x180px</b></p>
		<form id="upload_form_" rel="edit_entry_" enctype="multipart/form-data" onsubmit="startProgress('#upload_form_');">
            <div class="input-file">
                <label><span>Chọn file...</span>
                <input type="hidden" value="4194304" name="MAX_FILE_SIZE">  
                <input type="file" class="avatarFileEntry" name="image">
                <input name="entry" value="entry" type="hidden"/>
                </label>
                <var>
                	<input type="text" readonly="readonly" value="" class="txtFileNameEntry" name="txtFileName">
                </var> 
	        </div>
	        
	        <p class="termUploader">iGoal không chịu trách nhiệm với bất cứ vi phạm về bản quyền và nội dung về hình ảnh do thành viên đăng tải.Xin vui lòng đọc kỹ <a href="#">Điều Khoản Sử Dụng</a></p>
    		<a href="#" id="uploadAvatarSubmitButton" rel="edit_entry_" class="icon_1 btnUploadAvatar">Đăng ảnh</a>
        </form>
        <br/>
        <div id="progressBar" style="display: none;">
            <div id="theMeter">
                <div id="progressBarText"></div>
                <div id="progressBarBox">
                    <div id="progressBarBoxContent"></div>
                </div>
            </div>
        </div>
      </div>      
	<div class="w6"></div>
	<div style="float:left;">
		<img id="preview_" rel="edit_entry_" src="" alt="No image" style="display:none"/>				
	</div>
      <a href="javascript:validateAndSubmit()" class="hidiFinishBut"></a>    
      <div class="w6"></div>
      <div style="display:none" id="submitForm">
      	<form name="entry" method="POST" action="/done/editEntry.html">
      		<@spring.formInput path="entry.title"/>
      		<@spring.formInput path="entry.feeling"/>
      		<@spring.formInput path="entry.tookAmount"/>
      		<@spring.formInput path="entry.tookType"/>
      		<@spring.formTextarea path="entry.solution"/>
      		<@spring.formTextarea path="entry.experience"/>
      		<@spring.formTextarea path="entry.resources"/>
      		<@spring.formInput path="entry.imgURL"/>
      		<@spring.formTextarea path="entry.tip"/>
      		<@spring.formInput path="entry.goalId"/>
      		<@spring.formInput path="entry.goalTitle"/>
      		<@spring.formInput path="entry.feeling"/>
      		<@spring.formInput path="entry.feelingType"/>
      		<@spring.formInput path="entry.ownerName"/>
      		<@spring.formInput path="entry.ownerId"/>
      		<@spring.formInput path="entry.helpful"/>
      		<@spring.formInput path="entry.share"/>
      	</form>
      </div>      
    </div>
    
    <div id="right">
		<@userCompleteness />		
		<@userIntro/>
        <@topGoals />
        <@friendList username="${data.userInSession}" />
        <@friendHint />
        <@allFriend />
	</div>
  </div>